<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>What is zhis sha?</title>
<script type="text/javascript" src="../static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../static/easyui/themes/icon.css">
<link rel="stylesheet" href="../static/easyui/themes/metro-orange/easyui.css">
<link rel="stylesheet" href="../static/easyui/themes/metro-red/window.css">


<script type="text/javascript" src="../static/js/Hopa.js?<%=Math.random()%>"></script>
<link rel="stylesheet" href="../static/css/Hopa.css?<%=Math.random()%>">
<style type="text/css">
	.cont_l_he{
		width:100%;
		height:35px;
		margin-top:-5px;
		background-color:#FFF;
		border-radius:5px 5px 0px 0px ;
		box-shadow:0px 0px 5px 0px rgba(0,0,0,1);
	}
	.cont_l_ta{
		width:calc(100% - 2px);
	}
	.tail_1{
		width:100%;
		height:40px;
		background-color:#F2F2F2;
		margin-left:0px;
	}
	.tail_2{
		width:calc(100% - 20px);
		height:30px;
		background-color:#C5C5C5;
		margin-left:20px;
	}
	.tail_3{
		width:calc(100% - 40px);
		height:30px;
		background-color:#999;
		margin-left:40px;
	}
	.tail_4{
		width:100%;
		height:10px;
		background-color:#F2F2F2;
		margin-left:0px;
	}
	.tail_1 img{
		width:24px;
		height:24px;
		float:right;
		margin:8px;
	}
	.tail_2 img{
		width:20px;
		height:20px;
		float:right;
		margin:5px;
	}
	.ti{
		border-bottom:1px solid #191919;
		box-shadow:1px 1px 1px 1px rgba(0,0,0,1)
	}
</style>
<script type="text/javascript">

</script>
</head>
<body>
	<div class="head">
		<div class="head_l len">
			<div class="head_lb len">
				<img alt="" src="">
			</div>
			<div class="head_l_1 len"></div>
			<div class="head_l_2 len"><span>某某某NB公司</span>制定使用公司人员管理系统2.0</div>
			<div class="head_l_3 len">
				<div></div>
				<ul class="">
					<li><a>公司组成</a></li>
					<li><a>公司条目</a></li>
					<li><a>项目成员</a></li>
					<li><a>知识专区</a></li>
					<li><a>关于我们</a></li>
				</ul>
			</div>
		</div>
		<div class="head_r rin">
			<div id="dd" style="width:100px;height:100px;">
		    	<div id="title" class="He">
		   	 		<div class="He_n">
		   	 			<div class="He_image len">
		   	 				<img src="../static/images/head-image/漓漓子.png">
		   	 			</div>
		   	 			<div class="He_text rin">
		   	 				<div class="He_text_t"></div>
		   	 				<div class="He_text_b"></div>
		   	 			</div>
		   	 			<div class="He_down">
		   	 				
		   	 			</div>
		   	 		</div>
		   	 	</div>
			</div>
			<script type="text/javascript">
				$('#dd').draggable({
				    handle:'#title',
				    onDrag:function(){
				    	var XY = $("#dd").offset();
				    	if(XY.left>1110&&XY.left<1290){
				    		
				    	}
					},
					onStopDrag:function(){
						var wei = $("body").width();
						var XY = $("#dd").offset();
						if(XY.left<=wei/2){
							
						}else if(XY.left>wei/2){
							
						}
					}
				});
				$(".head_l_3 ul li a").click(function(){
					var text = $(this).html();
					$('#tit').tabs('add',{
						id: 'tit1',
						title: text,
						closable: true,
						href: "http://localhost:8080/zyc/Hopa2"
					});
				});
			</script>	
		</div>
	</div>
	<div class="cont">
		<div class="cont_l len">
			<div class="cont_l_he"></div>
			<div class="cont_l_ta">
				<div class="ti tail_1 t_1"><img class="t_up"></div>
					<div class="ti tail_2"><img class="t_up"></div>
						<div class="ti tail_3"></div>
				<div class="ti tail_4"></div>
				<div class="ti tail_1 t_1"><img class="t_up"></div>
					<div class="ti tail_2"><img class="t_up"></div>
						<div class="ti tail_3"></div>
					<div class="ti tail_2"><img class="t_up"></div>
						<div class="ti tail_3"></div>
						<div class="ti tail_3"></div>
						<div class="ti tail_3"></div>
						<div class="ti tail_3"></div>
				<div class="ti tail_4"></div>
				<div class="ti tail_1 t_1"><img class="t_up"></div>
					<div class="ti tail_2"><img class="t_up"></div>
						<div class="ti tail_3"></div>
				<div class="ti tail_4"></div>
			</div>
		</div>
		<div id="tit" class="easyui-tabs" style="width:calc(100% - 240px);height:100%;">
			<div title="First Tab" style="padding:10px;">
				
			</div>
		</div>
	</div>
</body>
</html>